<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2025-10-13 22:32:33
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-10-14 10:17:32
 * @FilePath: \BLOG\src\views\home\comments\VisitInfo.vue
-->
<template>
  <div class="visit-info">
    <div class="slider-title">
      💻 访问信息
      <div class="mac-style"></div>
    </div>
    <div class="visit-content-wrap">
      <img class="tianqi-icon" :src="getCurrentTianqiImg(state.visit.tq)" alt="" />
      <div class="visit-item-wrap">
        <div class="visit-item">
          <div class="visit-label">
            <span class="lable-icon">📅</span>
            日期：
          </div>
          <div class="visit-value text">{{ moment(state.visit.dateTime).format('YYYY-MM-DD') }} {{ state.visit.week }}</div>
        </div>
        <div class="visit-item">
          <div class="visit-label">
            <span class="lable-icon">🏙</span>
            IP：
          </div>
          <div class="visit-value text" v-if="state.visit.ip.length < 15">{{ state.visit.ip }}</div>

          <div class="visit-value text" v-else>
            <ToolTip :content="state.visit.ip" :placement="'bottom'">
              <div class="text" style="text-wrap: nowrap; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%">
                {{ state.visit.ip }}
              </div>
            </ToolTip>
          </div>
        </div>
        <div class="visit-item">
          <div class="visit-label">
            <span class="lable-icon">🌃</span>
            城市：
          </div>
          <div class="visit-value text">{{ state.visit.location }}</div>
        </div>
        <div class="visit-item">
          <div class="visit-label">
            <span class="lable-icon">🌐</span>
            浏览器：
          </div>
          <div class="visit-value text">{{ state.visit.browser }}</div>
        </div>
        <div class="visit-item">
          <div class="visit-label">
            <span class="lable-icon">📱</span>
            平台：
          </div>
          <div class="visit-value text">{{ state.visit.system }}</div>
        </div>
        <div class="visit-item">
          <div class="visit-label">
            <span class="lable-icon">🌡</span>
            温度：
          </div>
          <div class="visit-value text">{{ state.visit.feelsLike }}</div>
        </div>
        <div class="visit-item">
          <div class="visit-label">
            <span class="lable-icon">🌡</span>
            温度差：
          </div>
          <div class="visit-value text">{{ state.visit.low }} ~ {{ state.visit.high }}</div>
        </div>
        <div class="visit-item">
          <div class="visit-label">
            <span class="lable-icon">🌡️</span>
            湿度：
          </div>
          <div class="visit-value text">{{ state.visit.rh }}</div>
        </div>
        <div class="visit-item">
          <div class="visit-label">
            <span class="lable-icon">☁️</span>
            天气：
          </div>
          <div class="visit-value text">{{ state.visit.tq }}</div>
        </div>
        <div class="visit-item">
          <div class="visit-label">
            <span class="lable-icon">🌬️</span>
            风力：
          </div>
          <div class="visit-value text">{{ state.visit.fl }} {{ state.visit.fengxiang }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getVisitInfo } from '@/api/common';
import { getImgIcon } from '@/utils/common';
import { reactive } from 'vue';
import { useAppStore } from '@/store/app';
import moment from 'moment';
import useResize from '@/hooks/useResize';

const store = useAppStore();
const { isMobi } = useResize();

const state = reactive({
  visit: {
    date: '',
    week: '',
    ip: '',
    location: '',
    browser: '',
    system: '',
    dateTime: '',
    low: '',
    high: '',
    tq: '',
    fl: '',
    rh: '',
    feelsLike: ''
  }
});

const getVisitInfoFn = () => {
  if (store.visitInfo.ip && store.visitInfo.dateTime && moment(store.visitInfo.dateTime).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
    state.visit = store.visitInfo;
  } else {
    getVisitInfo().then(res => {
      if (res.code === 200) {
        const { localInfo, weatherInfo } = res.data;

        state.visit = {
          ip: res.data.ip,
          date: weatherInfo.date,
          dateTime: weatherInfo.dateTime,
          week: weatherInfo.day,
          location: localInfo.address,
          browser: res.data.browser,
          system: res.data.os,
          feelsLike: weatherInfo.feelsLike,
          low: weatherInfo.lowTemp,
          high: weatherInfo.highTemp,
          tq: weatherInfo.weather,
          fl: weatherInfo.wind,
          rh: weatherInfo.rh
        };
        store.SET_VISIT_INFO(state.visit);
      }
    });
  }
};
getVisitInfoFn();

// 获取当前天气icon
const getCurrentTianqiImg = (tq: string) => {
  let img = '阴.svg';
  const tianqis = ['晴', '多云', '阴', '小雨', '中雨', '大雨', '阵雨', '暴雨', '小雪', '中雪', '大雪', '雨夹雪', '雾'];
  if (tq) {
    tianqis.forEach(item => {
      if (tq.includes(item)) {
        img = item + '.svg';
      }
    });
  }
  return getImgIcon(img);
};
</script>

<style lang="scss" scoped>
.visit-info {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(#ffffff00, #caf3f4 50%, #b4f6e2 100%);
  .visit-content-wrap {
    padding: 40px 0 0 0;
    position: relative;
    background-size: 30% 30%;
    background-repeat: no-repeat;
    background-position: right;
    min-height: 305px;
    .tianqi-icon {
      width: 28%;
      height: 28%;
      position: absolute;
      top: 10px;
      right: 10px;
      animation: cloudAnimation 2s linear infinite;
    }
    .visit-item-wrap {
      position: absolute;
      top: 40px;
      left: 0px;
      width: 100%;
      padding: 0 20px 20px 20px;
      z-index: 99;
    }
    .visit-item {
      color: #222;
      display: flex;
      justify-content: flex-start;
      margin: 10px 0;
      .visit-label {
        text-align: left;
        width: 90px;
        .lable-icon {
          display: inline-block;
          width: 20px;
          text-align: center;
        }
      }
      .visit-value {
        width: calc(100% - 90px);
      }
    }
    .visit-tip {
      margin-top: 20px;
      color: #222;
    }
  }
}

@keyframes cloudAnimation {
  0% {
    transform: translate(0px);

    opacity: 0.8;
  }
  50% {
    transform: translate(8px);
    opacity: 1;
  }
  100% {
    transform: translate(0px);
    opacity: 0.8;
  }
}
</style>
